<template>
	<view>
		<view class="grid-box">
			<view class="head-title u-m-b-30"><text>类型设置</text></view>
			<view>
				<u-form label-width="150rpx">
					<u-form-item label="名称">
						<u-input placeholder="请输入类型名称" border v-model="name"/>
					</u-form-item>
					<u-form-item label="排序">
						<u-input placeholder="请输入排序" type="number" inputmode="decimal" border v-model="sort"/>
					</u-form-item>
					<u-form-item label="说明">
						<u-input placeholder="请输入说明" border v-model="brief" type="textarea"/>
					</u-form-item>
					<u-form-item label="上传图标">
						<common-upload max-count="1" @on-success="receipUploadSuccess" @on-remove="receipRemovePhoto"></common-upload>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<!-- 类型下属可回收物 -->
		<view class="grid-box">
			<view class="head-title u-m-b-30"><text>类型下的可回收物</text></view>
			<view style="margin: 0 -20rpx;">
				<product-list :typeId="id"></product-list>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<text class="u-color-main" @click="back">返回</text>
						<view class="u-flex-1">
							<!-- <view class="u-p-r-30 u-text-right">
								<text class="u-color-main" @click="back">取消</text>
							</view> -->
						</view>
						<u-button type="primary" size="medium" @click="submitType">提交</u-button>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	
	export default {
		data() {
			return {
				id: 0,
				icon: "",
				name: "",
				sort: 0,
				brief: "",
				enable: false,
				fileList: []
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.name = opt.name
			this.icon = opt.icon
			this.sort = opt.sort
			this.brief = opt.brief
			if(this.icon){
				this.fileList = [{
					url: this.fileURL+this.icon,
					name: this.icon
				}]
				console.log('this.fileList',this.fileList)
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			})
		},
		methods: {
			// 上传回调
			receipUploadSuccess(data, index, lists, name) {
				// console.log(data, index, lists, name)
				this.icon = data.datas.path
				this.editType()
			},
			// 删除回调
			receipRemovePhoto(index, lists, name) {
				// console.log(index, lists, name)
				this.icon = ""
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					title: '提交失败，请重试'
				})
			},
			back(){
				uni.navigateBack()
			},
			setState(e){
				// 修改大类的状态，启用或冻结
				this.$u.get(`/Waste/Type/SetState?id=${this.id}`).then((res)=>{
					if(e){
						uni.showToast({
							title: `${this.largename}已启用`,
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: `${this.largename}已冻结使用`,
							icon: 'none'
						})
					}
				})
			},
			// 提交修改类型
			submitType(){
				this.$u.post('/Waste/Type/Edit',{
					id: this.id,
					icon: this.icon,
					name: this.name,
					brief: this.brief,
					sort: this.sort
				}).then((res)=>{
					uni.showModal({
						content: '修改成功',
						showCancel: false,
						success: (res)=> {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/admin/catalogue/catalogue'
								});
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		// background-color: $u-color-main;
		position: relative;
		padding: 30rpx;
		box-sizing: content-box;
		// color: #fff;
		.title-item{
			display: flex;
			align-items: center;
			.img{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}
		}
	}
	.lower-type{
		.item{
			margin-bottom: 20rpx;
			border-bottom: 10rpx solid $u-bg-color;
			.num{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				color: $u-type-primary;
				border: 1px solid $u-type-primary;
				border-radius: 50%;
			}
		}
	}
	.bottom-box {
		height: 140rpx;
	
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			// height: 128rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
	
		.fixed-placeholder {
			height: 100%;
			width: 750rpx;
			margin-top: 30rpx;
		}
	
		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
	
		.btn-group {
			padding: 30rpx;
		}
	}
</style>
